<template>
  <div class="parent">
    <div ref="order" class="order" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {

    }
  },
  computed: {

  },
  created() {

  },
  mounted() {
    var myChart = echarts.init(this.$refs.order, 'dark')
    var option = {
      title: {
        text: '订单退单柱状图',
        left: 20,
        textStyle: {
          color: '#9aa8d4',
          fontSize: '30'
        }
      },
      grid: {},
      legend: {
        left: 'center',
        bottom: 0
      },
      xAxis: {
        type: 'category',
        data: [],

        axisLabel: {
          rotate: 90
        }
      },
      yAxis: {
        type: 'value',
        // name: 'Evaporation',
        position: 'left',
        alignTicks: true,
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff'
          }
        }
      },
      //
      series: [
        {
          data: [],
          type: 'bar',
          name: '订单',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#7e05e3' // 0% 处的颜色
              }, {
                offset: 1, color: '#bc04e2' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        },
        {
          data: [],
          type: 'bar',
          name: '退单',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#24cbff' // 0% 处的颜色
              }, {
                offset: 1, color: '#2492ff' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }
      ]
    }

    for (var i = 0; i < 30; i++) {
      var number = parseInt(Math.random() * 100) + 1
      option.series[0].data.push(number)
      option.series[1].data.push(parseInt(Math.random() * 100) + 1)
      option.xAxis.data.push(`day${i}`)
    }
    myChart.setOption(option)
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.parent{
  width: 100%;
  height: 100%;
  // background: #0a1631;
  .order{
    width: 100%;
    height: 100%;
  }
}
</style>
